<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐缓动画</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: lawngreen;
            position: absolute;
            top:200px;
            left: 400px;
        }
    </style>
</head>
<body>
<button>运动到200</button>
<button>运动到400</button>
<div id="div"></div>
<script>
window.onload = function () {


    var　btn1 = document.getElementsByTagName("button")[0];
    var　btn2 = document.getElementsByTagName("button")[1];
    var　div = document.getElementById('div');

    btn1.onclick= function () {

        animate(div,200);
    };
    btn2.onclick= function () {
        animate(div,400);
    };
   function animate(ele,traget) {
       clearInterval(ele.timer);
       //定义定时器
       ele.timer = setInterval(function () {
           var step = (traget-ele.offsetLeft)/10;
            //对步长加工
           step = step>0?Math.ceil(step):Math.floor(step);
           //动画原理：目标位置=当前位置+步长
           ele.style.left = ele.offsetLeft+step+'px';

           if(Math.abs(traget-ele.offsetLeft)<=Math.abs(step)){
               ele.style.left=traget;
               clearInterval(ele.timer);
           }
       },30)
   }
}
</script>
</body>
</html>